<template>
<div> 
<el-table
      :data="dataList" 
      :border="record.options.border||false" 
      :stripe="record.options.stripe||false" 
      v-loading="dataListLoading"  
      :key="refreshKey" 
      :style="record.style">
      <el-table-column type="index" width="50" header-align="center" align="center" v-if="record.options.showIndex"></el-table-column>
     
      <template v-for="(item , itemIdx ) in columns">
        <ng-table-column
          :column="item"
          :key="itemIdx"
          :models="models">
          <template slot-scope="{col,row,index,prop}" slot="expand">
            <span v-if="col.formater" v-html="formaterColumn(col.formater , row , row[prop])"></span>
            <span v-else>{{row[prop]}}</span>
          </template>
        </ng-table-column>
      </template>
    </el-table>
    <el-pagination
      class="mod-footer"
      v-if="page"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-size="pageSize"
      :total="totalCount"
      layout="total, prev, pager, next, jumper">
    </el-pagination>

</div>
</template>
<script>
import request from '@/utils/request'

import NgTableColumn from './table-column'
export default {
	components: {
		NgTableColumn
	},
	data() {
		return {
			dataListLoading: false,
			totalCount: 0,
			dataList: [] ,
			pageIndex: 1 ,
			refreshKey: 1
		}
	},
	props: {    
	    record: {//组件数据
	      type: Object,
	      required: true
	    }, 
	    models: {// 表单数组 
	      type: Object,
	      required: true
	    }, 
	    disabled: { // 是否禁用
	      type: Boolean,
	      default: false
	    } , 
	    preview: {// 是否当前是预览
	      type: Boolean ,
	      default: false
	    } 
  },
  computed:{
    	columns () {
	      return this.record && this.record.options ? this.record.options.columns : []
	    },
	    recordOptions () {  
	      return JSON.stringify(this.record.options)
	    },
	    // 是否分页
	    page() {
	    	return this.record && this.record.options ? this.record.options.page : false
	    },
	    pageSize() {
	    	return this.record && this.record.options ? this.record.options.pageSize : 10
	    },
	    // 过滤查询条件
		query() {
	    	if(this.record && this.record.options) {
	    		const queryList = this.record.options.queryData

	    		// 判断其中是否有需要解析的数据
	    		const query = {} 
	    		for(let i = 0 ; i < queryList.length ; i++) {
	    			const name = queryList[i].name 
	    			let value = queryList[i].value 
 
	    			if(value.indexOf('$') >= 0) {
	    				// 解析 
	    				try { 
	        			value = this.dynamicFun(value , this.models)
				      } catch (error) {
				        console.error('parse script error' , error)  
				      } 
	    			} 
	    			if(!value) {
	    				continue
	    			}
	    			query[name] = value
	    		}

	    		return query 
	    	}
	    	return null
	    }
  },
  watch:{ 
	    recordOptions(){
	      this.refreshKey++
	    },
	    query() {
	    	this.refreshKey++
	      	this.init()
	    }
	},
	mounted() {
		this.init()
	},
	methods: {
		dynamicFun(script , model , key="$") {
		  if(!script) return undefined 
		  const func = script.indexOf('return') >= 0 ? '{' + script + '}' : 'return (' + script + ')' 

		  const Fn = new Function(key, func)
		  return Fn(model)
		 
		},
		init() {
			this.pageIndex = 1 
			 
			this.dataListLoading = false 
			this.getDataList()
		},
		formaterColumn (script, row, columnValue) {
	      if (script && columnValue) {
	        const fn = eval(script)
	        const html_ = fn(row, this.models)
	        return html_
	        //return dynamicFun(script, this.models, columnValue)
	      }
	      return columnValue
	    },
	    getDataList() {
	    	// 如果是静态数据 直接赋予
	    	if(!this.record || !this.record.options) return  
	    	const dbType = this.record.options.dbType
	    	if(dbType == 1) {
	    		let staticList = this.record.options.datasourceStatic

	    		// 判断是否有过滤条件  如果有则静态数据过滤
	    		if(this.query) {
	    			// 静态数据过滤 先复制一遍数据
	    			staticList = JSON.parse(JSON.stringify(staticList))
	    			const queryData = this.query
	    			const keys = Object.keys(queryData); 
	    			// 数据过滤
	    			staticList = staticList.filter(t=> {
	    				// 全部先采用包含
	    				for(let k = 0 ; k < keys.length ; k++) {
	    					const key = keys[k]
	    					const kvalue = queryData[key]
	    					console.log('queryData' , queryData , key , kvalue)
	    					// 列表中没有此字段直接false
	    					if(!t[key]) return false

	    					// 如果过滤的的组件是多选,则判断任意一个值必须等于
	    					if(kvalue instanceof Array) {
	    						const inc = kvalue.includes(t[key])
	    						if(!inc) {
	    							return false
	    						}
	    					} else {
	    						// 其他判断包含
	    						let index = (t[key] + '').indexOf(kvalue)
	    						if(index < 0) {
	    							return false
	    						}
	    					} 
	    				}

	    				return true 

	    			})

	    		}

	    		// 静态数据
	    		this.totalCount = staticList.length 

	    		// 判断是否分页
	    		if(this.page) {
	    			// 分页 按照页码截取
	    			let startIndex = (this.pageIndex - 1) * this.pageSize
		        let endIndex =  startIndex + this.pageSize
		        if(endIndex > this.totalCount  ) {
		        	endIndex = this.totalCount  
		        } 
		        this.dataList = staticList && staticList.length > 0 ? staticList.slice(startIndex,endIndex) : [];

	    		} else {
	    			//不分页  静态数据一次加载
	    			this.dataList = staticList
	    		}
	    		
	    	} else if(dbType == 2) {
	    		// API 请求
	    		// 拼接数据请求
	    		const url = this.record.options.apiPath
	    		const parseScript = this.record.options.apiDataScript
	    		const methodType = this.record.options.methodType
	    		const pageSizeKey = this.record.options.pageSizeKey
	    		const pageIndexKey = this.record.options.currentPageKey


	    		const parseFun = eval(parseScript)
	    		 
	    		const queryData = this.query ? this.query : {}

	    		// 判断是否有分页 有分页则带上分页的请求数据
	    		if(this.page) {
	    			queryData[pageSizeKey] = this.pageSize 
	    			queryData[pageIndexKey] = this.pageIndex 
	    		}

				// 判断结果是否为空对象 则不请求
				if(Object.keys(queryData).length === 0) return

	    		const requsetData = { 
	        	url: url,
	        	method: methodType 
	      	}

	      	if(queryData) {
	      		if(methodType == 'get') {
	      			requsetData.params = queryData
	      		} else if(methodType == 'post') {
	      			requsetData.data = queryData
	      		}
	      	}

				this.dataListLoading = true
	    		request(requsetData).then((data)=> {
	    			const dataInfo = parseFun(data)
	    			if(dataInfo) {
	    				this.dataList = dataInfo.list 
	    				this.totalCount = dataInfo.total 
	    			} else {
	    				this.dataList = []
	    				this.totalCount = 0
	    			} 
	    		}).finally(()=> {
	    			this.dataListLoading = false
	    		})


	    	}
	       
	    },
	    // 当前页
	    currentChangeHandle (val) {
	      this.pageIndex = val;
	      this.getDataList();
	    },
	    	 
	}
}
</script>